<template>
  <div class="work-article">
    <div class="work-article-wrap w">
      <div class="item">
        <div class="title-wrap">
          <h1 class="title">学院新闻</h1>
        </div>
        <ul>
          <li v-for="(item, index) in newsList" :key="index">
            <a :href="item.link">{{ item.text }}</a>
            <time>{{ item.date }}</time>
          </li>
        </ul>
      </div>
      <div class="item">
        <div class="title-wrap">
          <h1 class="title">建党工作</h1>
        </div>
        <ul>
          <li v-for="(item, index) in partyList" :key="index">
            <a :href="item.link">{{ item.text }}</a>
            <time>{{ item.date }}</time>
          </li>
        </ul>
      </div>
      <div class="item">
        <div class="title-wrap">
          <h1 class="title">团学工作</h1>
        </div>
        <ul>
          <li v-for="(item, index) in group_learningList" :key="index">
            <a :href="item.link">{{ item.text }}</a>
            <time>{{ item.date }}</time>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'WorkArticle',
  data() {
    return {
            // 学院新闻数据
      newsList: [
        {
          text: "计算机科学与工程学院在“尧山杯”足球运动赛中取得佳绩。",
          date: "2019-4-3",
          link: ""
        },
        {
          text: "计算机科学与工程学院在“尧山杯”足球运动赛中取得佳绩。",
          date: "2019-4-3",
          link: ""
        },
        {
          text: "计算机科学与工程学院在“尧山杯”足球运动赛中取得佳绩。",
          date: "2019-4-3",
          link: ""
        },
        {
          text: "计算机科学与工程学院在“尧山杯”足球运动赛中取得佳绩。",
          date: "2019-4-3",
          link: ""
        },
        {
          text: "计算机科学与工程学院在“尧山杯”足球运动赛中取得佳绩。",
          date: "2019-4-3",
          link: ""
        }
      ],
      // 建党工作数据
      partyList: [
        {
          text: "计算机科学与工程学院入党积极分子啊啊啊啊啊啊啊啊啊",
          date: "2019-3-6",
          link: ""
        },
        {
          text: "计算机科学与工程学院入党积极分子啊啊啊啊啊啊啊啊啊",
          date: "2019-3-6",
          link: ""
        },
        {
          text: "计算机科学与工程学院入党积极分子啊啊啊啊啊啊啊啊啊",
          date: "2019-3-6",
          link: ""
        },
        {
          text: "计算机科学与工程学院入党积极分子啊啊啊啊啊啊啊啊啊",
          date: "2019-3-6",
          link: ""
        },
        {
          text: "计算机科学与工程学院入党积极分子啊啊啊啊啊啊啊啊啊",
          date: "2019-3-6",
          link: ""
        }
      ],
      // 团学工作数据
      group_learningList: [
        {
          text: "计算机科学与工程学院入党积极分子啊啊啊啊啊啊啊啊啊",
          date: "2019-3-6",
          link: ""
        },
        {
          text: "计算机科学与工程学院入党积极分子啊啊啊啊啊啊啊啊啊",
          date: "2019-3-6",
          link: ""
        },
        {
          text: "计算机科学与工程学院入党积极分子啊啊啊啊啊啊啊啊啊",
          date: "2019-3-6",
          link: ""
        },
        {
          text: "计算机科学与工程学院入党积极分子啊啊啊啊啊啊啊啊啊",
          date: "2019-3-6",
          link: ""
        },
        {
          text: "计算机科学与工程学院入党积极分子啊啊啊啊啊啊啊啊啊",
          date: "2019-3-6",
          link: ""
        }
      ],
    }
  },
}
</script>

<style scoped>
.work-article {
  width: 100%;
  padding: 50px 0 50px;
  background-image: url('https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg');
}

.work-article .work-article-wrap {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}

.work-article .work-article-wrap .item {
  width: 30%;
  background-color: #fff;
}

.work-article .work-article-wrap .item .title-wrap {
  color: #fff;
  background-color: #333;
  font-size: 30px;
  height: 150px;
  text-align: center;
  line-height: 150px;
  box-sizing: border-box;
  
}

.title-wrap h1 {
  margin: 0;
}

li {
  margin-bottom: 20px;
  padding: 0 30px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  
}

li a {
  color: #2c3338;
  font-size: 1rem;
}

li:nth-child(1) {
  margin-top: 1.25rem;
}

time {
  display: block;
  color: #bdb4b4;
}
</style>